import React from "react";
import { Image, StyleSheet, Text } from "react-native";
import { TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import navigator from "../../utils/navigator";
import BasePage from "../BasePage";
import { IconImage } from "../../utils";
import NavigationBar from "../common/NavigationBar";
import ViewUtils from "../../utils/ViewUtils";
import { MapView, Marker } from "react-native-amap3d";
import moment from "moment";
import { inject, observer } from "mobx-react";
import ToastUtils from "../../utils/ToastUtils";
import NavigateDialog from "../common/NavigateDialog";
import { logger } from "../../utils/util";

/**
 * 订单位置
 */
@inject("userStore", "appStore")
@observer
export default class OrderLocate extends BasePage {

  constructor(props) {
    super(props);
    this.pageNo = 1;
    this.pageSize = 15;
    this.totalPages = 0;
    this.isLoading = false;
    this.isFirst = true;
    this.state = {
      isRefreshing: false,
      showFoot: 0,
      showEmpty: false,
      dataList: [],
      delyStartTime: moment().format("YYYY-MM-DD"),
      delyEndTimeEnd: moment().format("YYYY-MM-DD"),
      centerLocation: null,
      showMap: true,
    };
  }

  componentDidMount() {
    super.componentDidMount();
  }

  renderOrderMarker = () => {
    const data = this.props.navigation.getParam("data");
    let coordinate = {
      longitude: parseFloat(data.addressLng),
      latitude: parseFloat(data.addressLat),
    };
    // logger("是否选中", index==0);
    return (
      <Marker
        active={false}
        infoWindowDisabled={true}
        onPress={() => {
          logger("查看订单详情2", data.ordNo);
          navigator.navigate("OrderDetails", { ordNo: data.ordNo });
        }}
        position={coordinate}
      >
        <View centerH style={{ backgroundColor: "transparent" }}>
          <View style={styles.customInfoWindow}>
            <View paddingH-7>
              <Text style={commonStyles.text_white_12}>{data?.xmbzNo}</Text>
            </View>
            <View paddingH-7>
              <Text style={commonStyles.text_white_12}>{data?.delySTime}-{data?.delyETime}</Text>
            </View>
          </View>
          <Image source={IconImage.ic_location} style={{ width: 25, height: 25 }} />
        </View>
      </Marker>
    );

  };

  renderMyMarker = () => {
    const { location } = this.props.userStore;
    // logger("更新位置", location);
    if (!IsNullOrEmpty(location)) {
      return (
        <Marker
          active={false}
          clickDisabled={false}
          infoWindowDisabled={true}
          icon={IconImage.icon_locate}
          position={{
            latitude: location.latitude,
            longitude: location.longitude,
          }}
        >
        </Marker>
      );
    }
    return null;
  };

  navigate = () => {
    const item = this.props.navigation.getParam("data");
    logger("订单信息", item.addressLat,item.addressLng);
    if (item.addressLng == 0 || item.addressLat == 0) {
      ToastUtils.showFailInfo("配送定位为空，请联系管理员");
      return;
    }
    this.navigateDialog.show({
      latitude: item.addressLat,
      longitude: item.addressLng,
    }, item.address1);
  };

  render() {
    const data = this.props.navigation.getParam("data");
    const { location } = this.props.userStore;
    logger("订单信息", data.address1);
    let center = null;
    if (data) {
      center = {
        latitude: parseFloat(data.addressLat) || 22.616282489952997,
        longitude: parseFloat(data.addressLng) || 114.1345043622764,
      };
    }

    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"订单位置"}
          backgroundColor={"transparent"}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <MapView
            initialCameraPosition={{
              target: center,
              zoom: 16
            }}
            showsCompass={false}
            ref={r => this.mapView = r}
            style={{ flex: 1 }}
          >
            {this.renderOrderMarker()}
            {this.renderMyMarker()}
          </MapView>
          <TouchableOpacity style={{ position: "absolute", right: 10, bottom: 100 }} pointerEvents={"box-none"}
                            onPress={() => {
                              this.mapView.moveCamera({
                                target: {
                                  latitude: location.latitude || 22.616282489952997,
                                  longitude: location.longitude || 114.1345043622764,
                                },
                                zoom: 16
                              }, 1000)
                            }}>
            <Image source={IconImage.icon_to_location} style={{ width: 32, height: 32 }} />
          </TouchableOpacity>
          <View bg-white padding-15 centerV  row>
            <View flex>
              <Text style={commonStyles.text_black}>{data?.address1}</Text>
            </View>
            <TouchableOpacity onPress={this.navigate}>
              <Image source={IconImage.icon_navgate} style={{ width: 30, height: 30 }} />
            </TouchableOpacity>
          </View>
        </View>
        <NavigateDialog ref={r => this.navigateDialog = r} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  customInfoWindow: {
    backgroundColor: "#58A4F4",
    borderRadius: 2.5,
    elevation: 4,
    zIndex: 100,
    alignItems: "center",
  },
  iosCustomInfoWindow: {
    backgroundColor: "white",
    borderRadius: 2.5,
    elevation: 4,
    left: -50,
  },
  titleWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: "#F9D63B",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginTop: 15,
  },

  contentWrap: {
    backgroundColor: "white",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  itemWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 6,
  },
  btn: {
    width: 80,
    height: 40,
    ...commonStyles.center,
    backgroundColor: "#F9D63B",
    borderRadius: 5,
  },
});
